\{! This parameter declarations makes it possible to validate expressions in the template !}
\{@java.util.List<{project.package-name ?: 'org.acme'}.resteasyqute.Quark> quarks}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Qute & Quarks</title>
    <style>
        .quarks {
            position: relative;
            height: 500px;
            width: 100%;
        }

        .quark {
            position: absolute;
            margin: 5px;
            display: inline-block;
            border-radius: 50%;
            text-align: center;
            vertical-align: middle;
            font-weight: bold;
            color: white;
            line-height: 75px;
            font-size: 12px;
        }

    </style>
</head>
<body>
<h1>Qute & Quarks</h1>

<p>Welcome to our Qute subatomic-particles generator.</p>

<p>
    <a href="/qute/quarks" onClick="fetch('/qute/quarks/add', { method: 'POST' });">Generate a new quark</a>
</p>

<div class="quarks">
    \{#for quark in quarks}
    <div class="quark" style="width: 75px; height: 75px; top: \{quark.position}%; left: \{quark.position}%; background-color: \{quark.color.hex}">
        <span>\{quark.flavor.toString.toLowerCase}</span>
    </div>
    \{/for}
</div>
</body>
</html>
